<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" />
        <Editor style="height: 310px; overflow-y: hidden;" v-model="valueHtml" @onCreated="handleCreated"
            @onChange="onChange" />
    </div>
</template>
<script setup lang="ts">
import { ref, shallowRef, onMounted,watch } from "vue";

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

import { uploadApi } from '@/api'

//数据流向是单向的,从父到子
const props = defineProps({ modelValue: { type: String, default: '' } })
const emit = defineEmits(['update:modelValue']) 
//触发器,声明。提前给老爹声明一下,我待会可能会动用你的money


//编辑器实例，必须用 shallowRef
// 页面先加载 组件再一点点渲染，渲染之后，才会拿到editorRef,可以理解为延迟加载，具有延迟性
const editorRef = shallowRef()
const valueHtml = ref('')//直接就可以说这个定义的变量里面的值为空的字符串
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    editor.setHtml(props.modelValue)

    // console.log(editor.getConfig);
    editor.getConfig().MENU_CONF['uploadImage'] = {
        // 自定义上传
        async customUpload(file: any, insertFn: any) {  // TS 语法
            // async customUpload(file, insertFn) {                   // JS 语法
            // file 即选中的文件

            // console.log(file);
            let reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = () => {
                uploadApi.upload.call({ name: file.name, base64: reader.result }).then((res) => {
                    // 自己实现上传，并得到图片 url alt(当鼠标放上去显示什么样的文字) href(链接，可以进行跳转)
                    // 最后插入图片
                    // insertFn(url, alt, href)
                    insertFn(res, file.name, "")
                })
            }


        }
    }
    editor.getConfig().MENU_CONF['uploadVideo'] = {
        // 自定义上传
        async customUpload(file: any, insertFn: any) {  // TS 语法
            // async customUpload(file, insertFn) {                   // JS 语法
            // file 即选中的文件

            // console.log(file);
            let reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = () => {
                uploadApi.upload.call({ name: file.name, base64: reader.result }).then((res) => {
                    // 自己实现上传，并得到图片 url alt(当鼠标放上去显示什么样的文字) href(链接，可以进行跳转)
                    // 最后插入图片
                    // insertFn(url, alt, href)
                    insertFn(res, "")
                })
            }


        }
    }
}


watch(()=>props.modelValue,(newVal,_oldVal)=>{
    editorRef.value.setHtml(newVal)
})
//编辑器结束
//获取编辑器html内容
// const getHtml = () => {
    // console.log(valueHtml.value);
    //    console.log(editorRef.value.getHtml());
    // 两种方法都可以
// }
onMounted(() => {
    console.log(props.modelValue);

})
// 编辑器内容，选区变化时的回调函数
const onChange = (editor: any) => {
    emit("update:modelValue", editor.getHtml())
}
</script>